<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图书管理系统</title>
    <!-- 引入bootstrap.css -->
    <link
      rel="stylesheet"
      href="../../lib/bootstrap/dist/css/bootstrap.min.css"
    />
    <!-- 公共 -->
    <link rel="stylesheet" href="../../css/base.css" />
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="container">
      <!-- 提示框 -->
      <div>
        <div class="alert info-box">操作结果</div>
        <h3>注册</h3>
      </div>
      <!-- 表单 -->
      <div class="form_wrap" style="margin-top: 30px">
        <form class="reg-form">
          <div class="mb-3" style="display: flex; align-items: center">
            <label class="form-label" style="margin-right: 20px">用户名</label>
            <input
              name="username"
              type="text"
              class="form-control"
              style="flex: 1"
            />
          </div>

          <div class="mb-3" style="display: flex; align-items: center">
            <label class="form-label" style="margin-right: 40px">姓名</label>
            <input
              name="name"
              type="text"
              class="form-control"
              style="flex: 1"
            />
          </div>

          <div class="mb-3" style="display: flex; align-items: center">
            <label class="form-label" style="margin-right: 40px">学院</label>
            <input
              name="college"
              type="text"
              class="form-control"
              style="flex: 1"
            />
          </div>

          <div class="mb-3" style="display: flex; align-items: center">
            <label class="form-label" style="margin-right: 40px">专业</label>
            <input
              name="major"
              type="text"
              class="form-control"
              style="flex: 1"
            />
          </div>

          <div class="mb-3" style="display: flex; align-items: center">
            <label class="form-label" style="margin-right: 40px">性别</label>
            <div style="display: inline-flex; align-items: center">
              <input
                name="gender"
                type="radio"
                value="1"
                id="gender-male"
                class="form-check-input"
                style="margin-right: 5px"
              />
              <label
                for="gender-male"
                class="form-check-label"
                style="margin-right: 15px"
                >男</label
              >

              <input
                name="gender"
                type="radio"
                value="0"
                id="gender-female"
                class="form-check-input"
                style="margin-right: 5px"
              />
              <label for="gender-female" class="form-check-label">女</label>
            </div>
          </div>

          <div class="mb-3" style="display: flex; align-items: center">
            <label class="form-label" style="margin-right: 40px">密码</label>
            <input
              name="password"
              type="password"
              class="form-control"
              style="flex: 1"
            />
          </div>

          <div class="mb-3" style="display: flex; align-items: center">
            <label class="form-label" style="margin-right: 10px"
              >确认密码</label
            >
            <input
              name="repwd"
              type="password"
              class="form-control"
              style="flex: 1"
            />
          </div>

          <button type="button" class="btn btn-primary btn-reg">注 册</button>
          <button type="button" class="btn btn-primary btn-login ">
            返回登录
          </button>
        </form>
      </div>
    </div>
  </body>
  <script src="../../lib/axios/dist/axios.min.js"></script>
  <script src="../../lib/form-serialize.js"></script>
  <script src="../../utils/alert.js"></script>
  <script src="../../utils/request.js"></script>
  <script>
    // 收集表单数据并提交注册请求
    document.querySelector(".btn-reg").addEventListener("click", async () => {
      //完成一下注册页面的表单校验

      const form = document.querySelector(".reg-form");
      const data = serialize(form, { hash: true, empty: true });
      // console.log(data);
      // 基本字段校验
      if (
        !data.username ||
        !data.name ||
        !data.college ||
        !data.major ||
        !data.gender ||
        !data.password ||
        !data.repwd
      ) {
        myAlert(false, "请填写完整信息");
        return;
      }

      // 密码匹配验证
      if (data.password !== data.repwd) {
        myAlert(false, "两次输入的密码不一致");
        return;
      }

      if (data.username.length < 2 || data.username.length > 20) {
        myAlert(false, "用户名长度必须在2到20个字符之间");
        return;
      }

      // 发送请求
      const res = await axios.post(
        "/user/library/register",
        data
      );
      // console.log(res)

      if (res.data.code === 1) {
        // 1.1 成功注册，跳转到登录页面
        myAlert(true, "注册成功");
        setTimeout(() => {
          location.href = "../login";
        }, 1000);
      } else {
        // 1.2 失败注册，显示错误信息
        myAlert(false, res.data.msg);
      }
    });

    // 返回登录
    document.querySelector(".btn-login").addEventListener("click", () => {
      location.href = "../login";
    });
  </script>
</html>
